<template>
  <div class="pay-success">
    <div class="pay-success__content">
      <img src="../../assets/img/order-pay-success.png">
      <div class="pay-success__info">
        <div class="pay-success__info__item pay-success__info__tit">进货订单支付成功！</div>
        <div class="pay-success__info__item pay-success__info__order">
          我们会及时安排送货，请您耐心等待。
        </div>
        <!-- <div class="pay-success__info__item pay-success__info__order">订单号：<span class="num">{{orderNum}}</span></div>
        <div class="pay-success__info__item pay-success__info__price">已付款：<span class="price">￥0.01</span></div> -->
      </div>
    </div>
    <div class="pay-success__btn-content">
      <van-button type="info" plain @click="backIndex">返回首页</van-button>
      <van-button type="info" class="detail" @click="goDetail">查看订单</van-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        orderNum: ''
      }
    },
    mounted() {
      this.orderNum = this.$route.query.num
    },
    methods: {
      backIndex() {
        this.$router.replace({
          path: '/order'
        })
      },
      goDetail() {
        this.$router.replace({
          name: 'stockOrderDetail',
          query: {
            id:this.$route.query.num
          }
        })
      }
    }
  }
</script>

<style lang="less" scpoed>
  @import '../../styles/variable.less';

  .pay-success {
    height: 100vh;
    overflow: auto;
    background: #f5f5f5;

    .pay-success__content {
      padding: 50px 0 50px 30px;
      background-color: #ffffff;
      text-align: center;
      img {
        height: 80px;
        margin-right: 20px;
      }

      .pay-success__info {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-right: 10px;

        .pay-success__info__item {
          margin-bottom: 5px;
          font-size: 14px;
          color: #999;
        }

        .pay-success__info__tit {
          color: #37c8bd;
          font-weight: bold;
          font-size: 18px;
        }

        .pay-success__info__order {
          .num {
            color: #000;
            word-break: break-all;
          }
          margin-top: 5px;
          color: #999;
          font-size: 12px;
        }

        .pay-success__info__price {
          .price {
            color: #fd6d50;
          }
        }
      }
    }

    .pay-success__btn-content {
      margin: 20px 40px;
      display: flex;
      justify-content: space-between;

      button {
        width: 45%;
      }

    }

  }
</style>